import { Card } from "antd";
import SButton from "../button";
import { useState } from "react";
import { UpOutlined } from "@ant-design/icons";
import _styles_ from "./index.module.css";

const styles = {
  header: { backgroundColor: "#e5e5e5" },
  title: { display: "flex", justifyContent: "center" },
  downIcon: { transform: "rotate(180deg)" },
};
const defaultConfigs = {
  columns: 3,
  span: 8,
  gap: "10px",
};

const Title = (props) => {
  return <div>{props.title}</div>;
};

const ExtraIcon = (props) => {
  const { open, setIsShowContent, setOpen } = props;
  const onClick = () => {
    setOpen(!open);
    setIsShowContent(!open);
  };
  return (
    <SButton
      type={"link"}
      size={"small"}
      icon={
        <UpOutlined
          className={open ? "" : _styles_.downIcon}
          style={{ transition: "all .3s" }}
        />
      }
      onClick={onClick}
    ></SButton>
  );
};

/**
 * @param {Object} props
 * @param {Object} props.configs - 配置项对象
 * @param {boolean} props.isShowExtra - 是否展示右上角
 * @param {string} [props.configs.title] - Card标题
 * @param {string} [props.configs.columns] - 列数
 * @param {string} [props.configs.gap] - 列间距
 * @param {string} [props.configs.justifyItems] - 行上对齐方式(start | normal ...)
 * @param {Object} [props.configs.styles] - Card样式
 */
function SCard(props) {
  const [open, setOpen] = useState(true);
  const [isShowContent, setIsShowContent] = useState(true);
  const { configs = {},children, isShowExtra = true, extra, ...restProps } = props;
  const _configs = Object.assign({}, defaultConfigs, configs || {});
  const _styles = Object.assign({}, styles, configs?.styles || {});

  return (
    <>
      <Card
        title={<Title title={_configs.title} />}
        extra={
          isShowExtra ? (
            extra ? (
              <extra />
            ) : (
              <ExtraIcon {...{ open, setOpen, setIsShowContent }} />
            )
          ) : (
            void 0
          )
        }
        styles={_styles}
        {...restProps}
      >
        {isShowContent && children}
      </Card>
    </>
  );
}

export default SCard;
